<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <link rel="stylesheet" href="asserts/dist/css/layui.css">
<!--  <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>-->
  <script src="asserts/dist/layui.js"></script>
  <script src="asserts/js/jquery-2.1.1.min.js"></script>

  <style type="text/css">
    #parent_div{
      width:100%;
      height: 100%;
      background-image: url("/asserts/img/2.png");
    }
    #form_div{
      width: 30%;
      height: 30%;
      position: relative;
      margin-top: 10%;
      margin-left: 40%;
    }

  </style>
</head>
<body>
<div id="parent_div">
  <div id="form_div">
    <form class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
          <input type="text" id="username" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
        </div>
        <div id="nameMsg" class="layui-form-mid layui-word-aux"></div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
          <input type="text" lay-verify="phone" id="tel" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
        <div id="telMsg" class="layui-form-mid layui-word-aux"></div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
          <input type="password" id="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div id="pwdMsg" class="layui-form-mid layui-word-aux"></div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
          <input type="email" id="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
        <div id="emailMsg" class="layui-form-mid layui-word-aux"></div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">验证码</label>
        <div class="layui-input-inline">
          <input type="text" id="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
          <input type="button" id="codeBtn" value="点击发送验证码" onclick="sendEmail(this)" class="layui-btn layui-btn-primary">
        </div>
        <div id="msg" class="layui-form-mid layui-word-aux"></div>
      </div>


      <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block" id="IsPurchased">
          <input type="radio" name="sex" value="男" title="男">
          <input type="radio" name="sex" value="女" title="女" checked>
        </div>
      </div>
      <!--    <div class="layui-form-item">-->
      <!--      <label class="layui-form-label">头像</label>-->
      <!--      <img  id="header_img"/>-->
      <!--      <button type="button" class="layui-btn" id="picture">-->
      <!--        <i class="layui-icon">&#xe67c;</i>上传图片-->
      <!--      </button>-->
      <!--    </div>-->

    </form>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" id="subBtn">注册</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </div>
</div>

<script>
    let clock = '';
    let nums = 180;
    let btn;
    let file;
    let arr = [false,false,false,false]
    let email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    //对邮箱格式进行校验
    $("#email").blur(function () {
        let value = $("#email").val();
        if (!email.test(value)){
            //邮箱格式不正确，提示用户
            $("#emailMsg").html("邮箱格式不正确")
            //发送邮件按钮不起作用
            $("#codeBtn").attr("disabled","disabled");
            arr[0] = false
        }else{
            $("#emailMsg").html("")
            $("#codeBtn").removeAttr("disabled");
            arr[0] = true
        }
    })

    //对昵称进行校验
    $("#username").blur(function () {
        let len = $("#username").val().length;
        if (len == 0 || len >10){
            $("#nameMsg").html("昵称长度在1-10之间")
            arr[1] = false
        }else{
            $("#nameMsg").html("")
            arr[1] = true
        }
    })

    let phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    //对手机号数据进行校验
    $("#tel").blur(function () {
        if (!phone.test($("#tel").val())){
            $("#telMsg").html("请输入正确手机号");
            arr[2] = false
        }else{
            $.ajax({
                url: '/taobei_web/user/checkTel',
                type: 'get',
                dataType: 'json',
                data: {
                    tel: $("#tel").val()
                },
                success(data) {
                    let telMsg = $("#telMsg")
                    //状态值为200 说明手机号可用，否则已经被注册过了
                    telMsg.html(data.msg)
                    if (data.status == 500){
                        //把注册按钮设置为不可点击
                        $("#subBtn").attr("disabled","disabled")
                    }else{
                        //把注册按钮设置为可以点击
                        $("#subBtn").removeAttr("disabled")
                        arr[2] = true
                    }
                }
            })
        }
    })

    //对密码长度进行校验
    $("#password").blur(function () {
        let len = $("#password").val().length;
        if (len < 6 || len > 20){
            $("#pwdMsg").html("密码长度在6-20位之间")
            arr[3] = false
        }else{
            $("#pwdMsg").html("")
            arr[3] = true
        }
    })

    //发送邮箱验证码
    function sendEmail(thisBtn) {
        btn = thisBtn
        $.ajax({
            url: '/taobei_web/user/registerCode',
            type: 'post',
            dataType: 'json',
            data: {
                username: $("#username").val(),
                email: $("#email").val()
            },
            success(data) {
                if (data.status == 200){
                    btn.disabled = true //将按钮置为不可点击
                    btn.value = nums+'秒后可重新获取';
                    clock = setInterval(doLoop, 1000); //一秒执行一次
                }
            }
        })
    }

    function doLoop()
    {
        nums--;
        if(nums > 0){
            btn.value = nums+'秒后可重新获取';
        }else{
            clearInterval(clock); //清除js定时器
            btn.disabled = false;
            btn.value = '点击发送验证码';
            nums = 180; //重置时间
        }
    }

    let flag = false;
    //注册按钮点击
    $("#subBtn").click(function () {
        //先判断各个输入框是否符合条件
        for (let i in arr){
            console.log(arr[i])
            if (arr[i] == false){
                flag = false
                return
            }
        }
        flag = true
        if (flag){
            //发起ajax请求
            $.ajax({
                url: '/taobei_web/user/register',
                type: 'post',
                data: {
                    username: $("#username").val(),
                    tel: $("#tel").val(),
                    email: $("#email").val(),
                    password: $("#password").val(),
                    sex: $("input[name = 'sex']:checked").val(),
                    code: $("#code").val()
                },
                dataType: 'json',
                success(data) {
                    //验证码不正确或者验证码已经超时，直接把错误信息提示用户
                    if (data.status == 500){
                        $("#msg").html(data.msg)
                    }else{
                        //注册成功，跳转到首页
                        location.href = "./index.html"
                    }
                }
            })
        }
    })

    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#picture' //绑定元素
            ,url: '/taobei_web/user/register'
            ,auto: false  //取消自动上传
            ,bindAction: '#subBtn'  //和按钮绑定
            ,choose(obj){
                obj.preview(function(index, file, result){
                    // this.file = file
                    console.log(file)
                    let img = $("#header_img");
                    img.attr('src',result);
                    img.css("width","25%");
                    img.css("height","25%");
                });
            },
            data: {
                tel: function () {
                    return $('#tel').val();
                },
                username: function () {
                    return $('#username').val();
                }
            }
        });
    });
</script>
</body>
</html>